//sidebar
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;
$menuWordColr: #ffffff;

$menuHeight: 64px;
$menuPhoneHeight: 56px;
$mainBottom: 64px; //pc 距离底部的距离
$mainBottomPhone: 40px; //phone 距离底部的距离

$menuActivecolor:#2F62E2;

// $rampowW: 1440px;
$rampowW: 75vw;
$mainColor: #6C7E59;
$homeW: 85%; // 首页宽度
$rateColor: #FEBD69;

$minWidth: 1200px;
// @charset  "UTF-8";
// @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

// 
$color_1:#191919;
$color_2: #DEE0DB;
$color_3: #fff;
$color_4: rgba(255, 255, 255, 0.1);
$color_5: #EAEAEA;
$color_6: #6D6D6D;
$color_7: #6C7E59; //主色1
$color_8:#A5AF99; // 主色2
$color_9: #fff;
$color_10:#D5D5D5;
$color_12: #6D6D6D;

$formW:696px;

@mixin transition($property: all, $duration: .2s, $timingFunction: ease, $delay: 0s){
  -webkit-transition: $property $duration $timingFunction $delay;
     -moz-transition: $property $duration $timingFunction $delay;
       -o-transition: $property $duration $timingFunction $delay;
          transition: $property $duration $timingFunction $delay;
          @if $property != all {
            will-change: $property; //using gpu
          }
}

@mixin translate($x: 0, $y: 0){
-webkit-transform: translate($x,$y);
    -moz-transform: translate($x,$y);
    -ms-transform: translate($x,$y);
      -o-transform: translate($x,$y);
        transform: translate($x,$y);
}

@mixin scale($x: 1, $y: 1){
  -webkit-transform: scale($x,$y);
      -moz-transform: scale($x,$y);
      -ms-transform: scale($x,$y);
        -o-transform: scale($x,$y);
          transform: scale($x,$y);
  }

$destopHD: 1920px;
$destop: 1439px;
$ipadL: 960px;
$ipadP: 768px;
$iphoneP: 540px;
$iphone: 375px;
$iphone5: 320px;
$paddingDesktop: 36px;
$paddingIpad: 24px;
$paddingPhone: 12px;
$navHeight: 72px;

$breakpoints: (
	'320': (max-width: 320px),
	'375': (max-width: 375px),
  '414': (max-width: 414px),
  '768': (max-width: 768px),
  '767': (max-width: 767px),
  '830': (max-width: 830px),
  '890': (max-width: 890px),
  '1023': (max-width: 1023px),
  '1024': (max-width: 1024px),
  '1242': (max-width: 1242px),
  '1280': (max-width: 1280px),
  '1366': (max-width: 1366px),
  '1439': (max-width: 1439px),
  '1493': (max-width: 1493px),
  '1440': (max-width: 1440px),
  '1600': (max-width: 1600px),
  '1700': (max-width: 1700px),

  '1900': (max-width: 1900px),
  'iphone5': (max-width: $iphone5),
  'iphone': (max-width: $iphone),
  'iphoneP': (max-width: $iphoneP),
  'min-iphoneP': (min-width: $iphoneP),
  'ipadP': (max-width: $ipadP),
  'ipadL': (max-width: $ipadL),
  'destop': (max-width: $destop),
  'destopHD': (max-width: $destopHD)
);

/// Responsive breakpoint manager
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond($breakpoint) {
  $raw-query: map-get($breakpoints, $breakpoint);

  @if $raw-query {
    $query: if(
      type-of($raw-query) == 'string',
      unquote($raw-query),
      inspect($raw-query)
    );

    @media #{$query} {
      @content;
    }
  } @else {
    @error 'No value found for `#{$breakpoint}`. '
         + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

@mixin fontSize($fontsize) {
  font-size: $fontsize;
  @if $fontsize == 20px {
    @include respond('1440'){
      font-size: 18px;
    }
  } @else if $fontsize == 16px{
    @include respond('1440'){
      font-size: 14px;
    }
  } @else if $fontsize == 32px{
    @include respond('1440'){
      font-size: 30px;
    }
  }
}


